<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      text-align: center;
    }

    div{
      background-color: rgb(51, 51, 51);
    }

  </style>
</head>
<body>
  <div>

  <svg width="500" height="500">
    <defs>
      <path id="linePath1" d="M280 290 L400 400" fill="none" />
      <mask id="maskId">
        <circle
          r="50"
          cx="0"
          cy="0"
          fill="url(#gradientId)"
        >
        <animateMotion
            begin="0"
            dur="2"
            id="animateMotion1"
            path="M280 290 L400 400"
            rotate='auto'
            fill="remove"
          />
        </circle>
      </mask>
      <path id="linePath2" d="M400 440 L80 440" fill="none" />
      <mask id="maskId2">
        <circle
          r="50"
          cx="0"
          cy="0"
          fill="url(#gradientId)"
        >
        <animateMotion
            begin="animate2.end"
            dur="2"
            id="animateMotion2"
            path="M400 440 L80 440"
            rotate='auto'
            fill="remove"
          />
        </circle>
      </mask>
      <rect id="rect1" x="200" y="250" width="80" height="80" fill="blue">
        <animate
          attributeName="fill"
          id="animate1"
          dur="1"
        />
      </rect>
      <rect id="rect2" x="400" y="400" width="80" height="80" fill="blue">
        <animate
          attributeName="fill"
          begin="animateMotion1.end"
          id="animate2"
          values="red"
          dur="1"
        />
      </rect>
      <rect id="rect3" x="0" y="400" width="80" height="80" fill="blue">
        <animate
          attributeName="fill"
          dur="1"
        />
      </rect>
      <rect id="rect4" x="0" y="100" width="80" height="80" fill="blue">
        <animate
          attributeName="fill"
          dur="1"
        />
      </rect>
      <rect id="rect5" x="400" y="100" width="80" height="80" fill="blue">
        <animate
          attributeName="fill"
          dur="1"
        />
      </rect>
      <radialGradient
            id="gradientId"
            cx="50%"
            cy="50%"
            fx="100%"
            fy="50%"
            r="50%"
          >
            <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
      </radialGradient>
    </defs>
    <use href="#linePath1" stroke-width="2" stroke="#235fa7" />
    <use
      href="#linePath1"
      stroke-width="3"
      stroke="#4fd2dd"
      mask="url(#maskId)"
      />
      <use href="#linePath2" stroke-width="2" stroke="#235fa7" />
    <use
      href="#linePath2"
      stroke-width="3"
      stroke="#4fd2dd"
      mask="url(#maskId2)"
      />
    <use href="#rect1" />
    <use href="#rect2" />
    <use href="#rect3" />
    <use href="#rect4" />
    <use href="#rect5" />
    <!-- <rect x="400" y="400" width="80" height="80" fill="blue"/>
    <rect x="0" y="400" width="80" height="80" fill="blue"/>
    <rect x="0" y="100" width="80" height="80" fill="blue"/>
    <rect x="400" y="100" width="80" height="80" fill="blue"/> -->
  </svg>
</div>

</body>
</html>
